{extend name="layout/iframe_layout" /}

{block name="title"}备份管理{/block}
{block name="style"}
<style>

</style>
{/block}

{block name="content"}

<div id="app" >
    <div class="app-container">
        {include file="public/search_form" /}

        <div class="action-btns">
            <el-button-group>
                <el-button type="info" size="mini" icon="el-icon-refresh" @click="search">刷新</el-button>
                <el-button type="success" size="mini" icon="el-icon-plus" @click="dialogVisible=true">新增
                </el-button>

            </el-button-group>
            <el-button-group>
                <el-button type="primary" size="mini" icon="el-icon-menu" @click="showColumnSetting = true">字段配置</el-button>
            </el-button-group>

        </div>
        <el-table
                ref="multipleTable"
                v-loading.fullscreen.lock="listLoading"
                element-loading-text="拼命请求中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.6)"
                :data="list"
                element-loading-text="Loading"
                border
                fit
                highlight-current-row
                tooltip-effect="dark"
                style="width: 100%"
                align="center"
                @selection-change="handleSelectionChange"
        >
            <!--      <el-table-column type="selection" width="55" align="center" prop="id"/>-->
             {include file="public/table_column" /}
            <el-table-column align="center" prop="created_at" label="操作" fixed="right" width="130">
                <template v-slot:default="{scope,row}">
                    <el-row type="flex" justify="space-around">
                        <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="del(row)"></el-button>
                        <el-button type="primary" size="mini" icon="el-icon-download" circle @click="download(row)"></el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>

        <!-- 字段设置对话框 -->
        <el-dialog title="字段设置" :visible.sync="showColumnSetting" width="80%">
            <el-checkbox v-model="isAllChecked" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选
            </el-checkbox>
            <el-checkbox-group v-model="checkList" @change="updateVisibleColumns">
                <el-checkbox
                        v-for="column in el_table_column"
                        :key="column.prop"
                        border
                        size="small"
                        :label="column.label"
                >
                    {{ column.label }}
                </el-checkbox>
            </el-checkbox-group>
            <span slot="footer" class="dialog-footer">
        <el-button @click="showColumnSetting = false">取 消</el-button>
        <el-button class="bs-left-10" type="primary" @click="closeVisibleColumns">确 定</el-button>
      </span>
        </el-dialog>


        <!--弹窗选择备份类型，数据库还是网站，或者全部-->
        <el-dialog title="选择备份的数据" :visible.sync="dialogVisible">
            <el-radio-group v-model="form.backup_type">
                <el-radio label="db">数据库</el-radio>
                <el-radio label="website">网站</el-radio>
                <el-radio label="all">全部</el-radio>
            </el-radio-group>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveData">确 定</el-button>
            </div>
        </el-dialog>
    </div>


</div>
{/block}

{block name="script"}
<script>
    Vue.mixin(commonMethods);//引入公共方法
    const api_base = '/backup';
    new Vue({
        el: '#app',
        data() {
            return {
               dialogVisible: false,
                form: {
                    backup_type: 'all'
                },

                listQuery:{
                    page: 1,
                    limit: 10
                },
                search_fields: [

                ],
                multipleSelection: [],
                el_table_column: [],
                list: null,
                listLoading: true,
                total: 0,
                searchForm: {
                    type: '',
                    keyword: '',
                    sort: '',
                    created_time: ''
                },

                isAllChecked: true, // 是否全选
                isIndeterminate: true, // 全选框是否为不确定状态
                checkList: [], // 选择的字段名称（标签）
                showColumnSetting: false,
                visibleColumns: [] // 当前显示的列配置
            };
        },
        methods: {


            download(row){
                window.open('/admin'+api_base+'/download?id='+row.id)
            },

            saveData() {
                this.listLoading = true;
                this.dialogVisible = false
                post(api_base+'/save', this.form)
                    .then(res => {
                        if (res.code != 0) {
                            this.$message.error(res.msg || '保存失败');
                            return;
                        }
                        this.$message.success(this.form.id ? '已更新' : '已新增');
                        this.dialogVisible = false;
                        this.fetchData(true);
                    }).catch(error => {
                    console.error('保存功能失败:', error);
                }).finally(() => {
                    this.listLoading = false;
                });

            }
        },
        mounted() {
            this.fetchListConfig();
            this.fetchData();
        }
    });
</script>
{/block}
